<template>
  <view class="index">
  <template v-if="selectId === 0">
    <keyword />
  </template>
  <template v-else-if="selectId === 1">
    <square/>
  </template>
  <template v-else-if="selectId === 2">
    <dailySignature />
  </template>
  <template v-else-if="selectId === 3">
    <my />
  </template>

  <TabBar :selectId="selectId" @change="handleChange"/>
</view>
</template>


<script lang="ts" setup >
import { ref } from 'vue'

import keyword from '@/pages/keyword/index.vue'
import square from '@/pages/square/index.vue'
import dailySignature from '@/pages/dailySignature/index.vue'
import my from '@/pages/my/index.vue'
import TabBar from '@/components/tab-bar/tab-bar.vue'

const handleChange = (id: number ) => selectId.value = id

const selectId = ref(0)
</script>